<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center platformMessage_flex_0"
			:style="{height:(64+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub platformMessage_fd0_0'>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0' @tap.stop="openModel(1)">
					<text class='fu-iconfont2  platformMessage_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='platformMessage_fd0_0_c1_c0'>单词训练</text>
				</view>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0'>
					<text class="print" @tap.stop="handleJumpDiy" data-type="navigateTo"
						:data-url="`/pages/index/print/wordOne?id=${record_id}`">打印</text>
					<text class="end_train" @tap.stop="openModel(2)">结束训练</text>
				</view>
			</view>

		</view>
		<view :style="{height: (64+StatusBarRpx)+'rpx'}"></view>

		<view class="loading_css" v-if="isShow">
			<uv-loading-icon size="24" mode="circle" color="#4087FD" :show="true"></uv-loading-icon>
			<view>加载中</view>
		</view>

		<template v-else>
			<view class="tips_info">
				<text>{{audioInfo.audio_text}}</text>
			</view>

			<view class="flex flex-direction align-stretch benben-flex-layout platformMessage_flex_1">
				<view class="intensify" v-for="(item, index) in list[one_index].item" :key="index">
					<template v-if="!item.is_click">
						<template v-if="two_index != index">
							<view class="intensify_item" @tap.stop="clickWord(false, index)">
								<!-- <text>{{item.word}}</text> -->
								<rich-text :nodes="fileText(item.word, item.syllable)"></rich-text>
							</view>
						</template>
						<template v-if="(two_index == index) && clickNum != 2">
							<view class="intensify_item_active" @tap.stop="clickWord(false, index)">
								<rich-text style="font-weight: 700;" :nodes="fileText(item.word, item.syllable)"></rich-text>
								<text class="item_active_explain"></text>
							</view>
						</template>
						<template v-if="(two_index == index) && clickNum == 2">
							<view class="intensify_item_active" @tap.stop="clickWord(false, index)">
								<rich-text style="font-weight: 700;" :nodes="fileText(item.word, item.syllable)"></rich-text>
								<text class="item_active_explain">{{item.c_word}}</text>
							</view>
						</template>
					</template>
					<template v-if="item.is_click">
						<view class="intensify_item" style="opacity: 0;" @tap.stop="clickWord(false, index)">
							<text>{{item.word}}</text>
						</view>
						<!-- <view class="intensify_item" style="opacity: 0;" @tap.stop="clickWord(true)">
							<text>{{item.word}}</text>
						</view> -->
					</template>
				</view>
				<!-- <view class="intensify">
					<view class="intensify_item_active">
						<text>jingle</text>
						<text class="item_active_explain">adv.(空间或时间上)介于…之间</text>
					</view>
				</view> -->
			</view>

			<view class="bottom_btn">
				<view class="btn_1" @tap.stop="pre">上一页</view>
				<view class="btn_2">第{{one_index+1}}页/共{{last_page}}页</view>
				<view class="btn_3" @tap.stop="next">下一页</view>
				<view class="btn_4">
					<image @tap.stop="wellAudio" :src='STATIC_URL+"96.png"' mode=""></image>
					<!-- <image v-else :src='STATIC_URL+"97.png"' mode=""></image> -->
				</view>
			</view>
		</template>



		<uv-modal width="400rpx" :showCancelButton="true" :closeOnClickOverlay="false" confirmColor="#4087FD"
			ref="modal" title="提示" :content='tips' align="center" :textStyle="{fontSize: 20 + 'px'}"
			@confirm="confirm"></uv-modal>

		<view style="height: 140rpx;"></view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import {highlightedText} from "@/common/utils/utils.js"
	export default {
		components: {},


		data() {
			return {
				"isShow": true,
				"list": [],
				"record_id": "7", // 训练id
				"tips": "",
				"page": "1",
				"last_page": "1",

				"languageType": 1, // 英语类型  1美式 2英式
				"grasp_num": 0, // 会的单词数量
				"not_num": 0, // 不会的单词数量
				"is_click": false,
				"clickNum": 0, // 单词点击次数
				"one_index": 0,
				"two_index": -1,
				"activeWord": "",
				"innerAudioContext": null, // 音频播放器
				"is_answer": 0, // 1会   2不会
				"decode": "", // 单词翻译
				"wordlist_info": [], // 选择的列表
				"is_well": false,
				"backType": 1,
				"is_train": 1, // 1全部  2标识过的
				"audio_index": 0, // 顺序播放的列表index

				"audioInfo": {
					"audio": {}
				}, // 页面标题音频
				
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
			
		},
		watch: {
			audio_index() {
				if ((this.audio_index+1) == this.list[this.one_index].item.length) {
					this.is_well = true;
				} else if (this.audio_index == 0) {
					this.is_well = false;
				}
			}
		},
		onLoad(options) {
			let {
				record_id,
				is_train
			} = options;
			if (record_id !== undefined) this.record_id = record_id;
			if (is_train !== undefined) this.is_train = is_train;
			this.getList();
			this.getAudio();
		},
		onUnload() {
		
		},
		onReady() {
			this.innerAudioContext = uni.createInnerAudioContext();
		},
		onShow() {
			this.languageType = uni.getStorageSync('languageType');
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			fileText(text, syllable) {
				return highlightedText(text, syllable);
			},
			// 获取录音配置  post65969da949442
			getAudio() {
				this.$api.post(global.apiUrls.post65969da949442, {

				}).then(res => {
					if (res.data.code == 1) {
						this.audioInfo = res.data.data[1];
						if (this.innerAudioContext) {
							this.innerAudioContext.destroy();
						}
						this.innerAudioContext = null;
						this.innerAudioContext = uni.createInnerAudioContext();
						this.innerAudioContext.autoplay = true;
						this.innerAudioContext.src = this.audioInfo.audio.path;

						this.innerAudioContext.onPlay(() => {
							console.log('开始播放');
						});
						this.innerAudioContext.onError((res) => {
							this.$message.info('播放失败，请重试');
						});
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			//获取列表
			getList() {
				this.$api.post(global.apiUrls.post6561a0338b117, {
					page: this.page,
					aid: this.record_id,
					is_train: this.is_train
				}).then(res => {
					// console.log(res);
					uni.stopPullDownRefresh();
					this.isShow = false;
					if (res.data.code == 1) {
						this.last_page = res.data.data.last_page;
						let data = res.data.data.data;
						if (data.length > 0) {
							data.forEach((v, k) => {
								v.is_click = false;
								v.is_point = false;
							})
						}
						this.list.push({
							item: data
						})
						this.one_index = this.page - 1;
						console.log(this.one_index);
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 按顺序播放单词音频
			wellAudio() {
				if (this.list[this.one_index].item.length == 0) {
					this.$message.info('本页单词已训练完');
					return;
				}
				
				this.two_index = this.audio_index;
				if (this.innerAudioContext) {
					this.innerAudioContext.destroy();
				}
				this.innerAudioContext = null;
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				if (this.languageType == 1) {
					this.innerAudioContext.src = this.list[this.one_index].item[this.two_index].american_accent;
				} else {
					this.innerAudioContext.src = this.list[this.one_index].item[this.two_index].british_accent;
				}
				
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
					if ((this.audio_index+1) < this.list[this.one_index].item.length) {
						if (!this.is_well) {
							this.audio_index += 1;
						} else {
							this.audio_index = this.audio_index - 1;
						}
					} else {
						this.audio_index = this.audio_index - 1;
					}
				});
				this.innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
					this.$message.info('播放失败，请重试');
					this.is_well = false;
					this.audio_index = this.audio_index - 1;
				});
				return;
				
				
				
				// let arr = [];
				// this.audio_index = 0;
				// this.list[this.one_index].item.forEach((v, k) => {
				// 	if (!v.is_click) {
				// 		if (this.languageType == 1) {
				// 			arr.push({
				// 				url: v.american_accent,
				// 				index: k
				// 			});
				// 		} else {
				// 			arr.push({
				// 				url: v.british_accent,
				// 				index: k
				// 			});
				// 		}
				// 	}
				// })
				// if (arr.length == 0) {
				// 	this.$message.info('本页单词已训练完');
				// }
				// this.is_well = true;
				// if (this.innerAudioContext) {
				// 	this.innerAudioContext.destroy();
				// }
				// this.innerAudioContext = null;
				// this.innerAudioContext = uni.createInnerAudioContext();
				// this.innerAudioContext.autoplay = true;
				// this.innerAudioContext.src = arr[this.audio_index].url;
				// this.two_index = arr[this.audio_index].index;
				// this.innerAudioContext.onPlay(() => {
				// 	console.log('开始播放');
				// });
				// this.innerAudioContext.onError((res) => {
				// 	console.log(res.errMsg);
				// 	console.log(res.errCode);
				// 	this.$message.info('播放失败，请重试');
				// 	this.is_well = false;
				// 	this.two_index = -1;
				// 	this.audio_index = -1;
				// });

				// this.innerAudioContext.onEnded(() => {
				// 	this.audio_index = Number(this.audio_index) + 1;
				// 	if (this.audio_index > arr.length - 1) {
				// 		this.is_well = false;
				// 		this.two_index = -1;
				// 		this.audio_index = -1;
				// 		return;
				// 	} else {
				// 		this.innerAudioContext.src = arr[this.audio_index].url;
				// 		this.two_index = arr[this.audio_index].index;
				// 		this.innerAudioContext.autoplay = true;
				// 		this.innerAudioContext.onPlay(() => {
				// 			console.log('开始播放');
				// 		});
				// 		this.innerAudioContext.onError((res) => {
				// 			console.log(res.errMsg);
				// 			console.log(res.errCode);
				// 			this.$message.info('播放失败，请重试');
				// 			this.is_well = false;
				// 			this.two_index = -1;
				// 			this.audio_index = -1;
				// 		});
				// 	}
				// })
			},
			pre() {
				if (this.one_index == 0) {
					return;
				} else {
					this.one_index = this.one_index - 1;
					console.log(this.one_index);
					if (this.innerAudioContext) {
						this.innerAudioContext.destroy();
					}
					this.innerAudioContext = null;
					this.is_well = false;
					this.two_index = -1;
					this.audio_index = 0;
				}
			},
			next() {
				if (this.list[this.one_index].item.length > 0) {
					let num = this.list[this.one_index].item.filter(u=> u.is_point == false).length;
					if (num > 0) {
						if (this.page == this.last_page) {
							
						} else {
							this.$message.info('请学习单词');
						}
						return;
					}
				}
				if (this.page < this.last_page) {
					if (this.one_index < this.page - 1) {
						this.one_index += 1;
					} else {
						this.page++;
						this.getList();
						if (this.innerAudioContext) {
							this.innerAudioContext.destroy();
						}
						this.innerAudioContext = null;
						this.is_well = false;
						this.two_index = -1;
						this.audio_index = 0;
					}
				} else if ((this.page == this.last_page) && (this.one_index != this.page - 1)) {
					this.one_index += 1;
				}
			},
			openModel(type) {
				this.backType = type;
				if (type == 1) {
					this.tips = '是否放弃训练单词？';
				} else if (type == 2) {
					this.tips = '确认结束训练？';
				}
				this.$refs.modal.open();
			},
			// 弹窗确定按钮
			confirm() {
				this.$refs.modal.close();
				if (this.backType == 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					this.$api.post(global.apiUrls.post656edab686a52, {
						aid: this.record_id
					}).then(res => {
						if (res.data.code == 1) {
							uni.redirectTo({
								url: '/pages/index/englishSpeech/detection?record_id=' + this.record_id
							})
						} else {
							this.$message.info(res.data.msg);
						}
					})
				}
			},
			// 单词点击次数
			clickWord(status, index) {
				// if (this.is_well) return;
				if (status) return;
				if (this.two_index != index) {
					this.clickNum = 0;
					this.list[this.one_index].item.forEach((v, k) => {
						v.is_click = false;
					})
				}
				this.clickNum += 1;
				// this.one_index = index;
				this.two_index = index;
				this.list[this.one_index].item[this.two_index].is_point = true;
				if (this.innerAudioContext) {
					this.innerAudioContext.destroy();
				}
				this.innerAudioContext = null;
				this.innerAudioContext = uni.createInnerAudioContext();
				
				if (this.languageType == 1) {
					this.innerAudioContext.src = this.list[this.one_index].item[this.two_index].american_accent;
				} else {
					this.innerAudioContext.src = this.list[this.one_index].item[this.two_index].british_accent;
				}
				
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				this.innerAudioContext.onError((res) => {
					this.clickNum = 1;
					this.$message.info('播放失败，请重试');
					console.log(res.errMsg);
				});
				if (this.clickNum == 3) {
					this.clickNum = 0;
					this.list[this.one_index].item[this.two_index].is_click = true;
					// this.submitWord();


					// 结束训练跳转
					// if (this.page == this.last_page) {
					// 	let index = -1;
					// 	this.list.forEach((v, k) => {
					// 		v.item.forEach((v1, k1) => {
					// 			if (!v1.is_click) {
					// 				index = k1;
					// 			}
					// 		})
					// 	})
					// 	if (index == -1) {
					// 		this.$message.info('已完成训练');
					// 		setTimeout(() => {
					// 			uni.redirectTo({
					// 				url: '/pages/index/englishSpeech/detection?record_id=' + this.record_id
					// 			})
					// 		}, 800)
					// 	} else {
					// 		return;
					// 	}
					// }
				} else {
					this.list[this.one_index].item[this.two_index].is_click = false;
				}
				this.$forceUpdate();
			},
			// 提交结果
			submitWord() {
				this.$api.post(global.apiUrls.post656458687a641, {
					aid: this.record_id,
					wordlist_id: this.list[this.one_index].item[this.two_index].aid
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {

					} else if (res.data.code == 0) {
						this.$message.info(res.data.msg);
					}
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.isColor {
		color: #4087FD !important;
	}

	.bottom_btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 25rpx 35rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f8f8f8;

		.btn_1 {
			width: 175rpx;
			height: 68rpx;
			line-height: 65rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 34rpx;
			opacity: 1;
			border: 1px solid #DDDDDD;
			font-size: 25rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
		}

		.btn_2 {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.btn_3 {
			width: 175rpx;
			height: 68rpx;
			line-height: 65rpx;
			text-align: center;
			background: #FFFFFF;
			border-radius: 34rpx;
			opacity: 1;
			border: 1px solid #DDDDDD;
			font-size: 25rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
		}

		.btn_4 {
			width: 68rpx;
			height: 68rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.tips_info {
		width: 100%;
		height: 50rpx;
		background: #FA3B3D;
		line-height: 50rpx;
		text-align: center;
		font-size: 15rpx;
		color: #fff;
		font-weight: bold;
	}

	.print {
		position: absolute;
		right: 155rpx;
		font-size: 20rpx;
	}

	.end_train {
		position: absolute;
		right: 25rpx;
		font-size: 20rpx;
	}

	.intensify {
		padding: 0 25rpx;
		background: #fff;
		margin: 0 0 16rpx 0;
		border-radius: 10rpx;

		.intensify_item {
			padding: 50rpx 0;
			font-size: 50rpx;
		}

		.intensify_item_active {
			// color: #4087FD;
			padding: 50rpx 0;
			font-size: 50rpx;
			display: flex;
			align-items: center;
			// justify-content: space-between;

			.item_active_explain {
				// color: #999;
				color: #333;
				font-size: 40rpx;
				margin-left: 90rpx;
			}
		}
	}

	.tabs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 135rpx;

		.tabs_item {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding: 20rpx 0;
			position: relative;
		}

		.active_item {
			color: #4087FD;
			font-weight: bold;
		}

		.tabs_line {
			display: inline-block;
			width: 31rpx;
			height: 5rpx;
			background: #4087FD;
			border-radius: 6rpx;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
	}

	.content_img {
		width: 100%;
		height: 219rpx;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto !important;
	}

	.platformMessage_flex_0 {
		background: #fff;
		width: 100%;
		height: 64rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.platformMessage_fd0_0_c1_c0 {
		font-size: 25rpx;
		font-weight: 500;
		color: #333333;
		line-height: 64rpx;
	}

	.platformMessage_fd0_0_c0_c0 {
		font-size: 25rpx;
		color: #333;
	}

	.platformMessage_fd0_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}

	.platformMessage_fd0_0 {
		padding: 0rpx 25rpx 0rpx 25rpx;
		position: relative;
	}

	.platformMessage_flex_1 {
		margin: 16rpx 25rpx 16rpx 25rpx;
		// background: #fff;
		// border-radius: 10rpx;
	}

	.platformMessage_fd1_0_c2 {
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 25rpx;
	}

	.platformMessage_fd1_0_c1 {
		margin: 10rpx 0rpx 0rpx 0rpx;
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 26rpx;
		// -webkit-line-clamp: 2;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0_c0 {
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		// line-height: 45rpx;
		// -webkit-line-clamp: 1;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0 {
		// background: #fff;
		width: 100%;
		padding: 20rpx 25rpx 20rpx 25rpx;
		border-bottom: 1px solid #eee;
	}
</style>